import React from "react";
import { Button, Layout, Dropdown, Avatar, Flex } from 'antd';
import { MenuFoldOutlined, DownOutlined } from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import { collapseMenu } from '../../store/reducers/tab'

const { Header } = Layout;

const CommonHeader = ({ collapsed }) => {
    const logout = () => {

    }
    const items = [
        {
            label: (
                <a target="_blank" rel="noopener noreferrer" >
                    个人中心
                </a>
            ),
            key: '0',
        },
        {
            label: (
                <a onClick={() => logout} target="_blank" rel="noopener noreferrer" >
                    退出
                </a>
            ),
            key: '0',
        },
    ];
    const dispatch = useDispatch()
    // 点击展开收起
    const setCollapse = () => {
        dispatch(collapseMenu())
    }

    return (
        <Header
            style={{
                display: "flex",
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: 0,
            }}
        >
            <Button
                type="text"
                icon={<MenuFoldOutlined />}
                style={{
                    fontSize: '16px',
                    width: 64,
                    height: 32,
                    backgroundColor: '#fff'
                }}
                onClick={() => { setCollapse() }}
            />

            <Dropdown
                menu={{
                    items,
                }}
            >
                <Avatar size={36} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
            </Dropdown>
        </Header>
    )
}

export default CommonHeader